<template>
    <view class="purchaseDetailContainer">
        <!-- 订单我的/商品详订单情 -->
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'待自提'">
        </cunstom_navigation_bar>
        <view class="contentBox">
			<image src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/ercode.png"></image>
            <view class="item1">取货码</view>
			
			<tki-barcode
				class="item2"
			    ref="barcode"
			    val="11111111111" />
				
			<ikun-qrcode 
			    width="400"
			    height="400"
				class="item3"
			    unit="rpx"
			    color="#000000"
			    data="绑定一个字符串变量(vue2在data中定义，vue3随意)" />
				
			<view class="item4">使用说明</view>
			<view class="item5">上课吧尽快吧深Vi就KABCLKSBOK吧时擦PKHIOPKANBi偶·上课不能哦AHCVSOBJVKNCJKBSKJVBA班吉拉你哦吧困哪成绩ABCJBAJK</view>
		</view>

        <view class="zhanwei"></view>




    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {
                
                propStyles: {
                
                    iconSrc: "black",
                    bgColor: '#FFD101',
                
                }

            };
        },
        computed: {

        },
        methods: {
			 

        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },
        watch: {

        },


        onLoad: function (option) {

            this.imgDomain = process.env.VUE_APP_BASE_URL;


        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #FFD101;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
		
      } */
    }

    .contentBox {
        width: 100%;
		background: #FFD101;
		position: relative; /* 设置为相对定位，以便内部的绝对定位元素能够相对于它定位 */
		  image {
			width: 690rpx;
			height: 1261rpx;
			width: 690rpx;
			height: 1261rpx;
			margin: 0 30rpx 0 30rpx;
		  }
		
		.item1{
			position: absolute; 
			width: 108rpx;
			height: 50rpx;
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			left: 50%; /* 水平居中，需要配合transform: translateX(-50%)使用 */
			top: 90rpx; /* 垂直居中，需要配合transform: translateY(-50%)使用 */
			transform: translate(-50%, -0%); /* 将.item1的中心点移动到.contentBox的中心点 */		
		}
		.item2{
			position: absolute; 
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			left: 50%; /* 水平居中，需要配合transform: translateX(-50%)使用 */
			top: 194rpx; /* 垂直居中，需要配合transform: translateY(-50%)使用 */
			transform: translate(-50%, -0%); /* 将.item1的中心点移动到.contentBox的中心点 */	
		}
		.item3{
			position: absolute; 
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			left: 50%; /* 水平居中，需要配合transform: translateX(-50%)使用 */
			top: 382rpx; /* 垂直居中，需要配合transform: translateY(-50%)使用 */
			transform: translate(-50%, -0%); /* 将.item1的中心点移动到.contentBox的中心点 */	
		}
		.item4{
			position: absolute; 
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			left: 64rpx;
			top: 1016rpx; 
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.item5{
			position: absolute; 
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			left: 66rpx;
			top: 1082rpx; 
			width: 610rpx;
			height: 108rpx;
			
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(51,51,51,0.6);
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

    }
    .zhanwei{
        width: 750rpx;
        height: 146rpx;
		background: #FFD101;
    }
</style>